body {
    background-color: #f7f7f7;
}

.html-body-overflow {
    overflow-x: hidden;
    overflow-y: hidden;
}

#meun-content {
    position: absolute;
    width: 4.43rem;
    height: 100%;
    background-color: #ffffff;
    bottom: 0;
    overflow: scroll;
    #exit {
        position: absolute;
        width: .3rem;
        height: .3rem;
        top: .05rem;
        right: .15rem;
        background-color: #8c8c8b;
        text-align: center;
        line-height: .3rem;
        color: #fff;
        font-weight: bolder;
    }

    .logo {
        width: 4.43rem;
        height: 2.24rem;
        border-bottom: 1px solid #dcdcde;
        box-sizing: border-box;
        padding: .3rem .4rem .4rem .12rem;

        img {
            width: 100%;
            height: 100%;
        }
    }

    ul {
        margin-left: .28rem;

        li {
            height: .75rem;
            line-height: .75rem;
            font-size: .26rem;
            border-bottom: 1px solid #dcdcde;

            a {
                padding-right: .36rem;
                display: flex;
                justify-content: space-between;
                color: #000;

                div {
                    &:last-child {
                        font-size: .35rem;
                        color: #dcdcde;
                    }
                }
            }
        }
    }
}

.hide {
    left: -100%;
}

.show {
    left: 0px;
    z-index: 2;
}

.head {
    display: flex !important;
    justify-content: space-between;
    box-sizing: border-box;
    padding: .3rem .2rem;

    #meun {
        width: .38rem;
        
    }

    .search {
        width: .2rem;
        height: .32rem;
        &:hover input{
            width: 2rem;
            border: 1px solid #dcdcde;
            border-radius: .16rem;
        }
        input {
            width: .32rem;
            height: .32rem;
            float: right;
            background: url(../images/search.png) no-repeat;
            background-position: right center;
            padding: .01rem;
            background-size: .3rem;
            border: none;
        }
    }
}

.banner {
    width: 6.5rem;
    height: 2.06rem;
    overflow: hidden;

    .carousel {
        width: 26rem;
        height: 100%;
        animation: rotation 4s infinite;

        @keyframes rotation {
            0% {
                transform: translate(0rem);
            }

            15% {
                transform: translate(-6.5rem);
            }
            33%{
                transform: translate(-6.5rem);
            }
            48%{
                transform: translate(-13rem);
            }
            66% {
                transform: translate(-13rem);
            }
            81%{
                transform: translate(-19.5rem);
            }
            100% {
                transform: translate(-19.5rem);
            }

        }

        .img {
            width: 6.5rem;
            height: 100%;
            float: left;
            position: relative;

            img {
                width: 100%;
            }

            .shade {
                position: absolute;
                bottom: 0px;
                left: 0px;
                width: 100%;
                background-color: #000;
                opacity: .6;
                color: #8c8c8b;
                font-size: .23rem;
                padding: .12rem .18rem;
            }
        }

    }
}

.title-content {
    font-size: .23rem;
    font-weight: bold;

    #nav-box {
        width: 100%;
        display: flex;
        justify-content: space-around;
        padding: 0px .1rem;

        .item {
            width: 25%;
            text-align: center;
            box-sizing: border-box;
            padding-top: .3rem;
            padding-bottom: .2rem;
        }

        .navactive {
            border-bottom: 3px solid #f22c1a;
            color: #f22c1a;
        }
    }

    .content {
        .item {
            width: 100%;
            display: none;

            div {
                width: 3.1rem;
                height: 5rem;
                border: 1px solid #f2f2f2;
                text-align: center;
                display: flex;
                flex-direction: column;

                &:nth-child(2n) {
                    border-left: none;
                }

                img {
                    box-sizing: border-box;
                    padding-top: .27rem;
                    padding-bottom: .2rem;
                    margin: 0 auto;
                    width: 94%;
                    height: 90%;
                }
            }
        }

        .active {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
    }
}